import React, { Component } from 'react'
import PersonInfo from './views/PersonInfo'

export default class App extends Component {
  constructor(){
    super()
    this.state={
      userList:[
       {
          id:1,
          name:'张三',
          age:23,
          sex:'女',
          hobby:['学习','化妆'],
          loveNum:0,
          avatar:'https://img1.baidu.com/it/u=3709586903,1286591012&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        
        },
        {
          id:2,
          name:'李四',
          age:33,
          sex:'男',
          hobby:['学习','打游戏'],
          loveNum:1,
          avatar:'https://img1.baidu.com/it/u=2143566218,685233210&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        },
        {
          id:3
        }
      ]
    }
  }

  getChangeLoveNum=(arg1,arg2)=>{
   const newUserList=this.state.userList.map(item=>{
      if(item.id===arg1){
        item.loveNum=arg2
      }
      return item
    })  
    this.setState({
      userList:newUserList
    })
  }
  render() {
    const {userList}=this.state
    return (
      <div style={{display:'flex'}}>
        {
          userList.length>0&&userList.map(item=><PersonInfo key={item.id} {...item} changeLoveNum={this.getChangeLoveNum}></PersonInfo>)
        }
      </div>
    )
  }
}
